<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>


    <style>
        table {
            table-layout: fixed;
        }

        table td.remark {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        table td, table th {
            text-align: center !important;
        }

        .layui-laypage button {
            background: #009688;
            color: white;
            border: 1px #009688 solid;
            border-radius: 3px;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="javascript:;">首页</a>
        <a href="javascript:;">系统管理</a>
        <a>
          <cite>角色管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.reload();" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <xblock>
        <button class="layui-btn" onclick="x_admin_show('新增角色','sys_roleadd.html','460px','80%')"><i class="layui-icon"></i>添加
        </button>
    </xblock>
    <table class="layui-table" id="roles">
        <thead>
        <tr>
            <th style="width: 6%;">序号</th>
            <th style="width: 10%;">角色名称</th>
            <th style="width: 10%;">操作</th>
        </thead>
        <tbody></tbody>
    </table>

</div>
<script>
    $(function () {
        layer = layui.layer;
        if(parent.sessionUser.roleid == 2){
            $(".layui-breadcrumb :nth-child(2)").text("家庭成员管理");
            $(".layui-breadcrumb :nth-child(3) cite").text("家庭成员");
        }
        getRoles();
    });

    function getRoles() {
        $.post("/getAllRoles", function (res) {
            console.log(res);
            if (res.code == 200) {
                fillTable(res.datas);
            } else {
                layer.msg(res.msg);
            }
        });
    }

    function fillTable(roles) {
        console.log(roles);
        var html = "";
        $.each(roles, function (index, item) {
            html += '<tr>' +
                '            <td>' + (index + 1) + '</td>' +
                '            <td>' + item.rolename + '</td>' +
                '            <td style="display: none">' + item.roleid + '</td>' +
                '            <td class="td-manage">' +
                '                <a title="编辑" onclick="x_admin_show(\'编辑\',\'sys_roleadd.html?index='+(index+1)+'#2\',\'460px\',\'80%\')" href="javascript:;">' +
                '                    <i class="layui-icon">&#xe642;</i>' +
                '                </a>' +
                '                <a title="删除" onclick="del(this,' + item.roleid + ')" href="javascript:;">' +
                '                    <i class="layui-icon">&#xe640;</i>' +
                '                </a>' +
                '            </td>' +
                '        </tr>';
        })
        $("#roles tbody").html(html);
    }

    /*删除*/
    function del(obj, id) {
        layer.confirm('确认要删除吗？',{title: false, closeBtn: false, skin: 'layui-layer-molv'}, function (index) {
            $.post("/role/del/"+id, function (res) {
                if (res.code == 200) {
                    getRoles();
                    layer.msg('删除成功!', {icon: 1, time: 1000});
                } else {
                    layer.msg("删除失败！", {icon: 2, time: 1000});
                }
            });

        });
    }
</script>
</body>

</html>